<template>
  <el-dialog 
    :model-value="visible" 
    @update:model-value="(value) => emit('update:visible', value)"
    title="处理反馈" 
    width="90%"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item label="处理情况">
        <el-input 
          v-model="form.description"
          type="textarea"
          :rows="4"
          placeholder="请描述当前处理情况..."
        />
      </el-form-item>
      <el-form-item label="进度">
        <el-slider 
          v-model="form.progress"
          :max="100"
          show-input
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交反馈</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface FeedbackForm {
  work_order_id: number | null
  description: string
  progress: number
}

interface Props {
  visible: boolean
  workOrderId?: number | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:visible': [value: boolean]
  submit: [form: FeedbackForm]
}>()

const form = ref<FeedbackForm>({
  work_order_id: null,
  description: '',
  progress: 50
})

// 监听工单ID变化，重置表单
watch(() => props.workOrderId, (newId) => {
  if (newId) {
    form.value = {
      work_order_id: newId,
      description: '',
      progress: 50
    }
  }
})

const handleClose = () => {
  emit('update:visible', false)
  // 重置表单
  form.value = {
    work_order_id: null,
    description: '',
    progress: 0
  }
}

const handleSubmit = () => {
  emit('submit', { ...form.value })
}
</script>